{% from '_includes/forms' import text %}

{%- set id = field.handle|id %}
{%- set descriptionId = descriptionId ?? "#{id}-desc" %}
{%- set prefix = field.prefix ?? false %}
{%- set suffix = field.suffix ?? false %}
{%- set hasPrefix = prefix is not same as(false) %}
{%- set hasSuffix = suffix is not same as(false) %}

{{ hiddenInput("#{field.handle}[locale]", craft.app.language) }}

{% if hasPrefix or hasSuffix %}
    {{ tag('span', {
        id: descriptionId,
        class: 'visually-hidden',
        text: [
            hasPrefix ? 'Value prefixed by “{prefix}”.'|t('app', {prefix: prefix}),
            hasSuffix ? 'Value suffixed by “{suffix}”.'|t('app', {suffix: suffix}),
        ]|filter|join(' '),
    }) }}
{% endif %}

<div class="flex">
    {% if hasPrefix %}
        <div aria-hidden="true">
            {{ prefix|md(inlineOnly=true)|raw }}
        </div>
    {% endif %}
    <div>
        {{ text({
            id: id,
            name: field.handle ~ '[value]',
            value: value,
            inputmode: field.decimals ? 'decimal' : 'numeric',
            size: field.size,
            inputAttributes: {
                aria: {
                    describedby: descriptionId,
                },
            },
        }) }}
    </div>
    {% if hasSuffix %}
        <div aria-hidden="true">
            {{ suffix|md(inlineOnly=true)|raw }}
        </div>
    {% endif %}
</div>
